<template>

<el-form ref="query" :model="query" :rules="rules" label-width="120px" class="condition-query-form">
  <h3>请输入您的查询条件</h3>
  <el-form-item label="贷款金额" prop="loanAmnt" >
    <el-input v-model.number="query.loanAmnt" @input="form2CheckInput"  @blur="checkBlur()">
      <template slot="append">元</template>
    </el-input>
  </el-form-item>
  <el-form-item label="贷款期限">
    <el-input  v-model.number="query.term" prop="term" @input="form2CheckInput"  @blur="checkBlur()">
      <template slot="append">期</template>
    </el-input>
  </el-form-item>
  <el-form-item label="贷款利率">
    <el-input  v-model="query.interestRate" prop="interestRate" @input="form2CheckInput"  @blur="checkBlur()">
      <template slot="append">%</template>
    </el-input>
  </el-form-item>
  <el-form-item label="分期付款金额">
    <el-input  v-model="query.installment" :readonly="true" prop="installment" @input="form2CheckInput"  @blur="checkBlur()">
      <template slot="append">元</template>
    </el-input>
  </el-form-item>
  <el-form-item label="就业年限">
    <el-input  v-model.number="query.employmentLength" prop="employmentLength" @input="form2CheckInput"  @blur="checkBlur()">
      <template slot="append">年</template>
    </el-input>
  </el-form-item>
  <el-form-item label="房屋所有权状况">
    <el-select v-model="query.homeOwnership" placeholder="活动区域">
      <el-option label="存在" value= '1' ></el-option>
      <el-option label="不存在" value= '0' ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="年收入">
    <el-input  v-model.number="query.annualIncome" prop="annualIncome"  @blur="checkBlur()" @input="form2CheckInput">
      <template slot="append">元</template>
    </el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">立即查询</el-button>
  </el-form-item>
</el-form>
</template>
<script>
import conditionQuery from '@/api/conditionQuery.js'

export default{
  data() {
    return {
      role: this.$store.getters.roles,
      query:{
        loanAmnt:0,
        term:0,
        interestRate:0,
        installment:0,
        employmentLength:0,
        homeOwnership: 0,
        employmentLength:0,
        homeOwnership:'0',
        annualIncome:0
      },
      rules: {
          loanAmnt: [
            { type: 'number', message: '贷款金额应为数字', trigger: 'change' },
            { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '贷款金额应大于0', trigger: 'change' }
          ],
          term: [
            { type: 'number',message: '贷款期限应为数字', trigger: 'change' },
            { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, required: true, message: '贷款期限应大于0', trigger: 'change' }
          ],
          interestRate: [
            { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, required: true, message: '贷款利率应大于0', trigger: 'change' }
          ],
          installment: [
            { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, required: true, message: '付款金额应大于0', trigger: 'change' }
          ],
          employmentLength: [
            { type: 'number',required: true, message: '就业年限应为数字', trigger: 'change' },
            { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, required: true, message: '就业年限应大于0', trigger: 'change' }
          ],
          annualIncome: [
            { type: 'number',required: true, message: '年收入应为数字', trigger: 'change' },
            { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, required: true, message: '年收入应大于0', trigger: 'change' }
          ],
        }
    }
  },
  methods: {
  //提交成功率查询
  submitForm() {
    //首先校验各字段是否符合规范
    this.$refs.query.validate((valid) => {
      if (valid) {
        this.query.homeOwnership=Number(this.query.homeOwnership)
        //向后台发送 新增成功率查询
        conditionQuery.apply(this.query)
        .then(response => {
          //显示提示消息
          this.$message({
              showClose: true,
              message: '请求成功，请等待管理员审核',
              type: 'success'
            })
            //跳转到自己的申请记录列表
            this.$router.push({ path: '/condition/list' })
        })
        .catch(() => {
        })
      } else {
          return false;
        }
      });
    },
    checkBlur() {
    },
    //每个输入框的值改变都会触发
    form2CheckInput() {
      try{
        //当填写了 贷款金额、分期、利率 自动计算分期金额
        if(this.query.loanAmnt!=0&&this.query.interestRate!=0&&this.query.term!=0){
          this.query.installment= parseFloat((this.query.loanAmnt* (1+ this.query.interestRate/100)) / this.query.term).toFixed(2)
        }
        //验证字段正不正确
        this.$refs.query.validate()
      }
      catch(_){
      }
    },
  },
}
</script>
<style lang="scss">
.condition-query-form{
  padding-left: 5%;
  h3{
    padding-left: 140px;
  }
  .el-input{
    max-width: 200px;
  }
}
</style>
